// 导入Manager组件
import AdminSelect from "../../component/AdminSelect/index.tsx";
import AdminTreeSelect from "../../component/AdminTreeSelect/index.tsx";
import Manager, { type TableColumnConfig } from "../../component/Manager/index.tsx";
import dayjs from "dayjs";
import type { FormItemConfigs } from "../../global.ts";
// 用户管理页面组件
export default function StaffManagerPage() {
  // API配置
  const apiConfig = {
    search: "/v1/admin/staff",
    edit: "/v1/admin/staff",
    add: "/v1/admin/staff",
    delete: "/v1/admin/staff",
  };

  // 用户管理表格列配置
  const tableColumnConfig = [
    {
      title: "序号",
      dataIndex: "_index",
      key: "_index",
      fixed: "left",
      width: 80,
    },
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "手机号",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "角色",
      dataIndex: "role_id",
      key: "role_id",
    },
    {
      title: "部门",
      dataIndex: "department_ids",
      key: "department_ids",
      render: (text: string[]) => {
        if (!text) return "";
        return text?.join(",");
      },
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      key: "is_disabled",
      render: (text: number) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      key: "updated_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
      fixed: "right",
    },
  ] as TableColumnConfig[];

  // 用户管理表单字段配置
  const searchFormFieldConfig = [
    {
      label: "关键字",
      name: "keyword",
      type: "input",
      placeholder: "用户名/姓名/手机号/邮箱",
    },
    {
      label: "角色",
      name: "role_id",
      type: "custom",
      customNode: (
        <AdminSelect
          listApiUrl="/v1/admin/role"
          fieldIdentifier={{
            label: "role_name",
            value: "id",
          }}
        />
      ),
    },
  ] as FormItemConfigs[];

  const fieldConfig: FormItemConfigs[] = [
    {
      label: "用户名",
      name: "username",
      type: "input",
      rules: [{ required: true, message: "请输入用户名" }],
    },
    {
      label: "密码",
      name: "password",
      type: "password",
      rules: [{ required: true, message: "请输入密码" }],
    },
    {
      label: "姓名",
      name: "name",
      type: "input",
      rules: [{ required: true, message: "请输入姓名" }],
    },
    {
      label: "手机号",
      name: "phone",
      type: "input",
      rules: [{ required: true, message: "请输入手机号" }],
    },
    {
      label: "邮箱",
      name: "email",
      type: "input",
    },
    {
      label: "角色",
      name: "role_id",
      type: "custom",
      customNode: (
        <AdminSelect
          listApiUrl="/v1/admin/role"
          fieldIdentifier={{
            label: "role_name",
            value: "id",
          }}
        />
      ),
      rules: [{ required: true, message: "请选择角色" }],
    },
    {
      label: "部门",
      name: "department_ids",
      type: "custom",
      customNode: (
        <AdminTreeSelect
          treeApiUrl="/v1/admin/department"
          fieldIdentifier={{
            pId: "parent_id",
            title: "name",
          }}
          multiple
        />
      ),
    },
    {
      label: "状态",
      name: "is_disabled",
      type: "select",
      options: [
        { label: "启用", value: 0 },
        { label: "禁用", value: 1 },
      ],
      rules: [{ required: true, message: "请选择状态" }],
    },
  ];

  const addFormFieldConfig = fieldConfig;

  const editFormFieldConfig = [
    {
      label: "ID",
      name: "id",
      type: "hidden",
    },
    ...fieldConfig,
  ] as FormItemConfigs[];

  const detailFieldConfig = [
    {
      title: "序号",
      dataIndex: "_index",
    },
    {
      title: "ID",
      dataIndex: "id",
    },
    {
      title: "用户名",
      dataIndex: "username",
    },
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "手机号",
      dataIndex: "phone",
    },
    {
      title: "邮箱",
      dataIndex: "email",
    },
    {
      title: "角色",
      dataIndex: "role_id",
    },
    {
      title: "部门",
      dataIndex: "department_id",
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      render: (text: number) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
  ];
  // 渲染Manager组件
  return (
    <>
      <Manager
        apiConfig={apiConfig}
        tableColumnConfig={tableColumnConfig}
        searchFormFieldConfig={searchFormFieldConfig}
        addFormFieldConfig={addFormFieldConfig}
        editFormFieldConfig={editFormFieldConfig}
        detailFieldConfig={detailFieldConfig}
        searchFields={["用户名", "姓名", "手机号", "邮箱"]}
        enableEdit
        enableAdd
        enableDelete
        defaultViewType="list"
      />
    </>
  );
}
